import { globalStyle, style } from '@vanilla-extract/css';
import { vars, Z_INDEX } from '../global.css';

export const waitingStyle = style({
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	position: 'fixed',
	left: '0',
	top: '0',
	right: '0',
	bottom: '0',
	zIndex: Z_INDEX.DIALOG,
	opacity: 0,
	transform: 'scale(0)',
	transition: 'opacity 0.2s, transform 0.2s',
	selectors: {
		'&.active': {
			opacity: 1,
			transform: 'scale(1)',
		},
	},
});

globalStyle(`${waitingStyle}>div`, {
	outline: 'none',
	backgroundColor: vars.color.toastBackground,
	boxShadow: `1px 1px 5px ${vars.color.shadow}`,
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'center',
	justifyContent: 'center',
	borderRadius: vars.layout.middleRadius,
	padding: '1rem',
	width: '3rem',
	height: '3rem',
});
